import React, {FC, useEffect} from 'react';
import {Form, Input} from "antd";
import {QuestionInputPropsType} from "./interface";

const PropComponent: FC<QuestionInputPropsType> = (props: QuestionInputPropsType) => {
  const {title = '', placeholder = '', onChange, disabled} = props
  const [form] = Form.useForm()

  function handleChange() {
    console.log('form.getFieldsValue()', form.getFieldsValue())
    if (!onChange) return
    onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({title, placeholder})
  }, [title, placeholder]);

  return (
    <Form layout={'vertical'}
          disabled={disabled}
          onValuesChange={handleChange}
          initialValues={{title, placeholder}} form={form}>
      <Form.Item label={'标题'} name={'title'} rules={[{required: true, message: '不能为空'}]}>
        <Input placeholder={'请输入内容'}/>
      </Form.Item>
      <Form.Item label={'placeholder'} name={'placeholder'}>
        <Input placeholder={'请输入内容'}/>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
